<template>
  <view class="u-collapse">
    <slot />
  </view>
</template>

<script>
/**
 * collapse 手风琴
 * @description 通过折叠面板收纳内容区域
 * @tutorial https://www.uviewui.com/components/collapse.html
 * @property {Boolean} accordion 是否手风琴模式（默认true）
 * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
 * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
 * @property {Object} head-style 标题自定义样式，对象形式
 * @property {Object} body-style 主体自定义样式，对象形式
 * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
 * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
 * @example <u-collapse></u-collapse>
 */
export default {
  name: 'u-collapse',
  emits: ['change'],
  props: {
    // 是否手风琴模式
    accordion: {
      type: Boolean,
      default: true
    },
    // 头部的样式
    headStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 主体的样式
    bodyStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 每一个item的样式
    itemStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 是否显示右侧的箭头
    arrow: {
      type: Boolean,
      default: true
    },
    // 箭头的颜色
    arrowColor: {
      type: String,
      default: '#909399'
    },
    // 标题部分按压时的样式类，"none"为无效果
    hoverClass: {
      type: String,
      default: 'u-hover-class'
    }
  },
  created() {
    this.childrens = []
  },
  data() {
    return {}
  },
  methods: {
    // 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
    init() {
      this.childrens.forEach((vm, index) => {
        vm.init()
      })
    },
    // collapse item被点击，由collapse item调用父组件方法
    onChange() {
      let activeItem = []
      this.childrens.forEach((vm, index) => {
        if (vm.isShow) {
          activeItem.push(vm.nameSync)
        }
      })
      // 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
      if (this.accordion) activeItem = activeItem.join('')
      this.$emit('change', activeItem)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';
</style>
